<template>
	<view class="login">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
		
				<image :src="logo"></image>
			</view>
			<!-- 登录方式切换 -->
			<view class="login-type-tabs">
				<view class="tab-item" :class="{active: loginType === 'code'}" @tap="switchLoginType('code')">
					<text>验证码登录</text>
				</view>
				<view class="tab-item" :class="{active: loginType === 'password'}" @tap="switchLoginType('password')">
					<text>密码登录</text>
				</view>
				<view class="tab-item" :class="{active: loginType === 'face'}" @tap="switchLoginType('face')">
					<text>人脸登录</text>
				</view>
			</view>
			
			<!-- 主体表单 -->
			<view class="main">
				<!-- 手机号输入（人脸登录时隐藏） -->
				<wInput
					v-if="loginType !== 'face'"
					v-model="phoneData"
					type="text"
					maxlength="11"
					:placeholder="loginType === 'code' ? '请输入手机号' : '手机号/用户'"
				></wInput>
				
				<!-- 验证码登录 -->
				<wInput
					v-if="loginType === 'code'"
					v-model="verCode"
					type="number"
					maxlength="6"
					placeholder="验证码"
					isShowCode
					ref="runCode"
					@setCode="getVerCode()"
				></wInput>
				
				<!-- 密码登录 -->
				<wInput
					v-if="loginType === 'password'"
					v-model="passData"
					type="password"
					maxlength="20"
					placeholder="密码"
					isShowPass
				></wInput>
				
				<!-- 人脸登录 -->
				<view v-if="loginType === 'face'" class="face-login-section">
					<!-- 摄像头实时预览 -->
					<view v-if="showCamera" class="camera-container">
						<camera 
							device-position="front" 
							flash="off" 
							class="camera-view"
							id="camera"
							@error="cameraError"
						>
							<view class="camera-overlay">
								<view class="face-guide-frame"></view>
								<view class="camera-tips">请将人脸对准框内</view>
							</view>
						</camera>
						<view class="camera-controls">
							<view class="camera-btn cancel-btn" @tap="closeCamera">取消</view>
							<view class="camera-btn capture-btn" @tap="captureFace">拍照</view>
						</view>
					</view>
					<!-- 照片预览 -->
					<view v-else-if="faceImage" class="face-preview">
						<image :src="faceImage" mode="aspectFill" class="face-image"></image>
						<view class="face-actions">
							<view class="face-btn retake-btn" @tap="retakePhoto">重拍</view>
							<view class="face-btn confirm-btn" @tap="confirmFace">确认</view>
						</view>
					</view>
					<!-- 初始状态：选择拍照或相册 -->
					<view v-else class="face-upload-options">
						<view class="face-option-btn" @tap="openCamera">
							<u-icon name="camera-fill" size="50" color="#fff"></u-icon>
							<text class="face-option-text">摄像头拍照</text>
						</view>
						<view class="face-option-btn" @tap="chooseFaceImage">
							<u-icon name="photo-fill" size="50" color="#fff"></u-icon>
							<text class="face-option-text">从相册选择</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 登录按钮（人脸登录时隐藏，因为确认照片后自动登录） -->
			<wButton 
				v-if="loginType !== 'face'"
				class="wbutton"
				text="登 录"
				:rotate="isRotate" 
				@click="startLogin"
			></wButton>
			
			<!-- 其他登录 -->
			<view class="other_login cuIcon">
				<view class="login_icon">
					<view class="wechat-login-btn" @tap="login_weixin">
						<u-icon color="#1cd66c" name="weixin-fill" size="40"></u-icon>
						<text class="wechat-login-text">微信一键登录</text>
					</view>
				</view>
			</view>
			
			<!-- 底部信息 -->
			<view class="footer">
				<navigator url="forget" open-type="navigate">找回密码</navigator>
				<text>|</text>
				<navigator url="register" open-type="navigate">注册账号</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import config from '../../config/config.js' // 配置
	
	export default {
		data() {
			return {
				logo:require('../../static/image/login/logo.png'),
				loginType: 'code', // 登录方式：code-验证码登录，password-密码登录，face-人脸登录
				phoneData:'', //手机号/用户名
				verCode:'', //验证码
				passData:'', //密码
				faceImage: '', // 人脸图片Base64
				showCamera: false, // 是否显示摄像头
				isRotate: false, //是否加载旋转
				timer:null,//倒计时
			};
		},
		components:{
			wInput,
			wButton,
		},
		mounted() {
			_this= this;
			this.isLogin();
		},
		methods: {
			// 切换登录方式
			switchLoginType(type) {
				this.loginType = type;
				// 清空输入
				this.verCode = '';
				this.passData = '';
				this.faceImage = '';
				this.showCamera = false;
				
				// 如果切换到人脸登录，自动打开摄像头
				if (type === 'face') {
					this.$nextTick(() => {
						setTimeout(() => {
							this.openCamera();
						}, 300); // 延迟300ms确保界面渲染完成
					});
				}
			},
			isLogin(){
				//判断缓存中是否登录过，直接登录
				try {
					const value = uni.getStorageSync('token');
					if (value) {
						//有登录信息
						console.log("已登录用户：",value);
						// uni.switchTab({
						// 	url:'../index/index'
						// })
					}
				} catch (e) {
					// error
				}
			},
		    startLogin(e){
                console.log(e)
				//登录
				if(this.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				
				// 验证手机号/用户名
				if (!this.phoneData || this.phoneData.trim().length === 0) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '请输入手机号或用户名'
				    });
				    return;
				}
				
				// 验证码登录验证
				if (this.loginType === 'code') {
					if (!this.verCode || this.verCode.length !== 6) {
			            uni.showToast({
			                icon: 'none',
							position: 'bottom',
			                title: '请输入6位验证码'
			            });
			            return;
			        }
					// 验证手机号格式（验证码登录必须是手机号）
					if (!this.phoneData.match(/^1[3-9]\d{9}$/)) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请输入正确的手机号'
						});
						return;
					}
				}
				
				// 密码登录验证
				if (this.loginType === 'password') {
					if (!this.passData || this.passData.length < 6) {
			            uni.showToast({
			                icon: 'none',
							position: 'bottom',
			                title: '密码至少6位'
			            });
			            return;
			        }
				}
				
				// 人脸登录验证（不需要手机号）
				if (this.loginType === 'face') {
					if (!this.faceImage) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请先拍摄人脸照片'
						});
						return;
					}
					// 如果已有照片，直接登录
					this.faceLogin();
					return;
				}
				
				this.Login();
		    },
			getVerCode(){
				//获取验证码
				if (!this.phoneData || this.phoneData.length !== 11) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '请输入正确的手机号'
				    });
				    return false;
				}
				console.log("获取验证码")
				this.getAuthCode();
			},
			// 获取验证码
			getAuthCode(){
				// 验证手机号
				if (!this.phoneData || this.phoneData.length !== 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请输入正确的手机号'
					});
					return;
				}
				
				this.$api.getAuthCode({
					telephone: this.phoneData,
				}).then(res => {
					console.log('验证码响应', res);
					
					// 处理响应数据
					if (res.data && res.data.code === 200) {
						clearTimeout(this.timer);
						this.$refs.runCode.$emit('runCode'); //触发倒计时
						
						const responseData = res.data.data;
						let message = '验证码已发送';
						
						// 开发环境会返回验证码
						if (responseData && responseData.code) {
							message = '验证码已发送：' + responseData.code;
							console.log('验证码（开发环境）：', responseData.code);
						}
						
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: message
						});
						
						// 60秒后可以重新获取
						setTimeout(function(){
							_this.$refs.runCode.$emit('runCode', 0); // 终止倒计时
						}, 60000);
					} else {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: res.data?.message || res.data?.msg || '获取验证码失败'
						});
					}
				}).catch(err => {
					console.error('获取验证码失败', err);
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '获取验证码失败，请重试'
					});
				});
			},
			Login(){
				this.isRotate = true;
				
				// 构建登录参数
				let loginParams = {};
				
				if (this.loginType === 'code') {
					// 验证码登录：手机号+验证码
					loginParams = {
						phone: this.phoneData,
						authCode: this.verCode
					};
				} else if (this.loginType === 'face') {
					// 人脸登录：手机号+人脸图片
					loginParams = {
						phone: this.phoneData,
						faceImage: this.faceImage
					};
					// 调用人脸登录接口
					this.faceLogin();
					return;
				} else {
					// 密码登录：判断是手机号还是用户名
					if (this.phoneData.match(/^1[3-9]\d{9}$/)) {
						// 手机号格式，使用手机号+密码登录
						loginParams = {
							phone: this.phoneData,
							password: this.passData
						};
					} else {
						// 用户名格式，使用用户名+密码登录
						loginParams = {
							username: this.phoneData,
							password: this.passData
						};
					}
				}
				
				this.$api.Login(loginParams).then(res=>{
					this.isRotate = false;
					console.log("登录响应",res);
					
					// 处理响应数据
					if(res.data && res.data.code === 200){
						const userData = res.data.data;
						
						// 保存token和用户信息
						if(userData.token){
							uni.setStorageSync("token", userData.token);
						}
						if(userData.user){
							uni.setStorageSync("user", userData.user);
						}
						
						uni.showToast({
							title:'登录成功',
							icon:"success"
						});
						
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/index/index'
						});
					}, 1500);
					}else{
						uni.showToast({
							title: res.data.message || '登录失败',
							icon:"none"
						});
					}
					
				}).catch(err=>{
					this.isRotate = false;
					console.error('登录失败', err);
					uni.showToast({
						title:'登录失败，请重试',
						icon:"none"
					});
				})
			},
			// 人脸登录（不需要手机号）
			faceLogin() {
				this.isRotate = true;
				
				// 人脸登录不需要手机号，直接传人脸图片
				this.$api.faceLogin({
					faceImage: this.faceImage
				}).then(res => {
					this.isRotate = false;
					console.log("人脸登录响应", res);
					
					if (res.data && res.data.code === 200) {
						const userData = res.data.data;
						
						// 保存token和用户信息
						if (userData.token) {
							uni.setStorageSync("token", userData.token);
						}
						if (userData.user) {
							uni.setStorageSync("user", userData.user);
						}
						
						uni.showToast({
							title: '登录成功',
							icon: "success"
						});
						
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1500);
					} else {
						uni.showToast({
							title: res.data.message || '登录失败',
							icon: "none"
						});
					}
				}).catch(err => {
					this.isRotate = false;
					console.error('人脸登录失败', err);
					uni.showToast({
						title: err.message || '登录失败，请重试',
						icon: "none"
					});
				});
			},
			// 打开摄像头
			openCamera() {
				// #ifdef MP-WEIXIN || APP-PLUS || H5
				this.showCamera = true;
				// #endif
				
				// #ifndef MP-WEIXIN || APP-PLUS || H5
				// 不支持摄像头的平台，使用选择图片
				this.chooseFaceImage();
				// #endif
			},
			// 关闭摄像头
			closeCamera() {
				this.showCamera = false;
			},
			// 摄像头拍照
			captureFace() {
				// #ifdef MP-WEIXIN
				// 小程序使用camera组件的takePhoto方法
				const ctx = uni.createCameraContext('camera', this);
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						const tempFilePath = res.tempImagePath;
						this.convertImageToBase64(tempFilePath);
						this.showCamera = false;
					},
					fail: (err) => {
						console.error('拍照失败', err);
						uni.showToast({
							icon: 'none',
							title: '拍照失败，请重试'
						});
					}
				});
				// #endif
				
				// #ifdef APP-PLUS
				// APP使用camera组件的takePhoto方法
				const ctx = uni.createCameraContext('camera', this);
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						const tempFilePath = res.tempImagePath;
						this.convertImageToBase64(tempFilePath);
						this.showCamera = false;
					},
					fail: (err) => {
						console.error('拍照失败', err);
						uni.showToast({
							icon: 'none',
							title: '拍照失败，请重试'
						});
					}
				});
				// #endif
				
				// #ifdef H5
				// H5平台，使用选择图片代替
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						this.convertImageToBase64(tempFilePath);
						this.showCamera = false;
					}
				});
				// #endif
			},
			// 摄像头错误处理
			cameraError(e) {
				console.error('摄像头错误', e);
				uni.showToast({
					icon: 'none',
					title: '摄像头启动失败，请检查权限'
				});
				this.showCamera = false;
			},
			// 重拍照片
			retakePhoto() {
				this.faceImage = '';
				this.openCamera();
			},
			// 确认使用当前照片
			confirmFace() {
				// 照片已确认，直接进行登录（不需要手机号）
				if (this.faceImage) {
					this.faceLogin();
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先拍摄人脸照片'
					});
				}
			},
			// 将图片转换为Base64
			convertImageToBase64(tempFilePath) {
				uni.getFileSystemManager().readFile({
					filePath: tempFilePath,
					encoding: 'base64',
					success: (fileRes) => {
						// 添加data:image前缀
						this.faceImage = 'data:image/jpeg;base64,' + fileRes.data;
					},
					fail: (err) => {
						console.error('读取图片失败', err);
						uni.showToast({
							icon: 'none',
							title: '读取图片失败'
						});
					}
				});
			},
			// 选择人脸图片（从相册）
			chooseFaceImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'], // 只从相册选择
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						this.convertImageToBase64(tempFilePath);
					},
					fail: (err) => {
						console.error('选择图片失败', err);
						uni.showToast({
							icon: 'none',
							title: '选择图片失败'
						});
					}
				});
			},
			login_weixin() {
				//微信登录
				// #ifdef MP-WEIXIN
				// 小程序微信登录
				this.wechatMiniProgramLogin();
				// #endif
				
				// #ifdef H5
				// H5公众号微信登录
				this.wechatOfficialAccountLogin();
				// #endif
				
				// #ifdef APP-PLUS
				// APP微信登录
				this.wechatAppLogin();
				// #endif
				
				// #ifndef MP-WEIXIN || H5 || APP-PLUS
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '当前环境不支持微信登录'
				});
				// #endif
			},
			// 小程序微信登录
			wechatMiniProgramLogin() {
				uni.showLoading({
					title: '登录中...'
				});
				
				// 调用微信登录获取code
				uni.login({
					provider: 'weixin',
					success: (res) => {
						if (res.code) {
							// 调用后端接口
							this.$api.wechatLogin({
								loginType: 'wechat',
								code: res.code,
								platform: 'miniprogram'
							}).then(apiRes => {
								uni.hideLoading();
								console.log('微信登录成功', apiRes);
								
								// 处理响应数据
								if (apiRes.data && apiRes.data.code === 200) {
									const userData = apiRes.data.data;
									
									// 保存token和用户信息
									if (userData.token) {
										uni.setStorageSync('token', userData.token);
									}
									if (userData.user) {
										uni.setStorageSync('user', userData.user);
									}
									
									uni.showToast({
										title: '登录成功',
										icon: 'success'
									});
									
									// 跳转到首页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1500);
								} else {
									uni.showToast({
										title: apiRes.data.message || '登录失败',
										icon: 'none'
									});
								}
							}).catch(err => {
								uni.hideLoading();
								console.error('微信登录失败', err);
								uni.showToast({
									title: '登录失败，请重试',
									icon: 'none'
								});
							});
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '获取微信授权失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('微信登录失败', err);
						uni.showToast({
							title: '微信登录失败',
							icon: 'none'
						});
					}
				});
			},
			// 公众号H5微信登录
			wechatOfficialAccountLogin() {
				// 获取当前页面URL作为回调地址
				const currentUrl = window.location.href;
				const redirectUri = encodeURIComponent(currentUrl);
				
				// 从配置中获取公众号AppID
				const appId = config.wechat?.officialAccountAppId || 'your_official_account_appid';
				
				if (!appId || appId === 'your_official_account_appid') {
					uni.showModal({
						title: '配置提示',
						content: '请先在 config/config.js 中配置公众号AppID\n\n配置步骤：\n1. 登录微信公众平台\n2. 获取公众号AppID\n3. 修改配置文件\n\n详细说明请查看：微信配置指南.md',
						showCancel: false,
						confirmText: '知道了'
					});
					return;
				}
				
				// 检查URL中是否已经有code（回调）
				const urlParams = new URLSearchParams(window.location.search);
				const code = urlParams.get('code');
				
				if (code) {
					// 已经有code，直接调用登录接口
					uni.showLoading({
						title: '登录中...'
					});
					
					this.$api.wechatLogin({
						loginType: 'wechat',
						code: code,
						platform: 'official'
					}).then(apiRes => {
						uni.hideLoading();
						console.log('微信登录成功', apiRes);
						
						if (apiRes.data && apiRes.data.code === 200) {
							const userData = apiRes.data.data;
							
							if (userData.token) {
								uni.setStorageSync('token', userData.token);
							}
							if (userData.user) {
								uni.setStorageSync('user', userData.user);
							}
							
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							});
							
							setTimeout(() => {
								// 清除URL中的code参数
								const newUrl = window.location.pathname;
								window.history.replaceState({}, '', newUrl);
								
								uni.switchTab({
									url: '../index/index'
								});
							}, 1500);
						} else {
							uni.showToast({
								title: apiRes.data.message || '登录失败',
								icon: 'none'
							});
						}
					}).catch(err => {
						uni.hideLoading();
						console.error('微信登录失败', err);
						uni.showToast({
							title: '登录失败，请重试',
							icon: 'none'
						});
					});
				} else {
					// 没有code，跳转到微信授权页面
					const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
					window.location.href = authUrl;
				}
			},
			// APP微信登录
			wechatAppLogin() {
				uni.showLoading({
					title: '微信登录中...',
					mask: true
				});
				
				// 检查微信是否安装
				uni.checkSession({
					success: () => {
						// 已登录，直接调用登录
						this.doWechatAppLogin();
					},
					fail: () => {
						// 未登录，调用微信登录
						this.doWechatAppLogin();
					}
				});
			},
			// 执行APP微信登录
			doWechatAppLogin() {
				// 调用微信登录获取code
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log('APP微信登录响应', loginRes);
						
						if (loginRes.errMsg === 'login:ok') {
							// 获取code（APP端可能返回在authResult中）
							let code = loginRes.code;
							
							// 如果code不在res.code中，尝试从authResult获取
							if (!code && loginRes.authResult) {
								code = loginRes.authResult.code;
							}
							
							if (code) {
								// 调用后端接口进行登录
								this.$api.wechatLogin({
									loginType: 'wechat',
									code: code,
									platform: 'app' // APP端使用app平台标识
								}).then(apiRes => {
									uni.hideLoading();
									console.log('APP微信登录成功', apiRes);
									
									// 处理响应数据
									if (apiRes.statusCode === 200 && apiRes.data && apiRes.data.code === 200) {
										const userData = apiRes.data.data;
										
										// 保存token和用户信息
										if (userData.token) {
											uni.setStorageSync('token', userData.token);
										}
										if (userData.user) {
											uni.setStorageSync('user', userData.user);
										}
										
										uni.showToast({
											title: '微信登录成功',
											icon: 'success',
											duration: 2000
										});
										
										// 跳转到首页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1500);
									} else {
										const errorMsg = apiRes.data?.message || apiRes.data?.msg || '登录失败';
										console.error('APP微信登录失败', errorMsg);
										uni.showToast({
											title: errorMsg,
											icon: 'none',
											duration: 3000
										});
									}
								}).catch(err => {
									uni.hideLoading();
									console.error('APP微信登录请求失败', err);
									uni.showToast({
										title: '登录失败，请检查网络连接',
										icon: 'none',
										duration: 3000
									});
								});
							} else {
								uni.hideLoading();
								console.error('获取微信code失败', loginRes);
								uni.showToast({
									title: '获取微信授权失败，请重试',
									icon: 'none',
									duration: 3000
								});
							}
						} else {
							uni.hideLoading();
							console.error('微信登录失败', loginRes.errMsg);
							uni.showToast({
								title: '微信登录失败：' + loginRes.errMsg,
								icon: 'none',
								duration: 3000
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('APP微信登录调用失败', err);
						
						// 根据错误类型给出提示
						let errorMsg = '微信登录失败';
						if (err.errMsg) {
							if (err.errMsg.includes('cancel')) {
								errorMsg = '用户取消登录';
							} else if (err.errMsg.includes('fail')) {
								errorMsg = '微信登录失败，请检查是否安装微信';
							} else {
								errorMsg = '微信登录失败：' + err.errMsg;
							}
						}
						
						uni.showToast({
							title: errorMsg,
							icon: 'none',
							duration: 3000
						});
					}
				});
			},
			login_weibo() {
				//微博登录
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '...'
				});
			},
			login_github() {
				//github登录
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '...'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
@import url("../../components/watch-login/css/icon.css");
@import url("./css/main.css");
.wbutton{
	margin-top:60rpx;
}
.other_login{
	margin-top: 180rpx;
}
.footer{
	color:#fff;
	margin-top:30rpx;
}
.login_icon{
	image{
		width: 80rpx;
		height: 80rpx;
	}
}
.wechat-login-btn{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	cursor: pointer;
}
.wechat-login-text{
	font-size: 24rpx;
	color: #1cd66c;
	margin-top: 10rpx;
}
.login-type-tabs{
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 40rpx 0 20rpx 0;
}
.tab-item{
	padding: 20rpx 60rpx;
	margin: 0 20rpx;
	color: rgba(255,255,255,0.7);
	font-size: 28rpx;
	border-bottom: 2rpx solid transparent;
	transition: all 0.3s;
}
.tab-item.active{
	color: #fff;
	border-bottom-color: #fff;
	font-weight: bold;
}
.login{
	width: 100vw;
	height: 100vh;
	background: url(../../static/image/login/login.jpg) no-repeat;
	background-size: cover;
	overflow: auto;
	box-sizing: border-box;
	padding-bottom: 20rpx;
}
.face-login-section {
	margin-top: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 摄像头容器 */
.camera-container {
	width: 100%;
	height: 500rpx;
	position: relative;
	border-radius: 20rpx;
	overflow: hidden;
	background-color: #000;
}
.camera-view {
	width: 100%;
	height: 100%;
}
.camera-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}
.face-guide-frame {
	width: 400rpx;
	height: 500rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.8);
	border-radius: 20rpx;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}
.camera-tips {
	color: #fff;
	font-size: 28rpx;
	margin-top: 20rpx;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
}
.camera-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 30rpx;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.camera-btn {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #fff;
}
.cancel-btn {
	background-color: rgba(255, 255, 255, 0.3);
}
.capture-btn {
	width: 140rpx;
	height: 140rpx;
	background-color: rgba(255, 255, 255, 0.9);
	color: #333;
	font-weight: bold;
	box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.5);
}
/* 照片预览 */
.face-preview {
	position: relative;
	width: 100%;
	height: 500rpx;
	border-radius: 20rpx;
	overflow: hidden;
	border: 2rpx solid rgba(255, 255, 255, 0.6);
	background-color: #000;
}
.face-image {
	width: 100%;
	height: 100%;
}
.face-actions {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 30rpx;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.face-btn {
	padding: 20rpx 60rpx;
	border-radius: 50rpx;
	font-size: 28rpx;
	color: #fff;
}
.retake-btn {
	background-color: rgba(255, 255, 255, 0.3);
}
.confirm-btn {
	background-color: rgba(76, 175, 80, 0.8);
	font-weight: bold;
}
/* 初始选择状态 */
.face-upload-options {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 40rpx 20rpx;
}
.face-option-btn {
	width: 200rpx;
	height: 200rpx;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.15);
	border: 2rpx solid rgba(255, 255, 255, 0.3);
}
.face-option-text {
	color: rgba(255, 255, 255, 0.9);
	font-size: 24rpx;
	margin-top: 20rpx;
}
</style>

